<template>
  <view class="doc-detail-container">
    <view class="title">
      <text>TA的星梦保档案</text>
      <image
        class="ic-close"
        src="../static/ic_close2.png"
        @click="close"
      ></image>
    </view>
    <swiper
      style="width: calc(100vw - 70rpx); height: 870rpx"
      :current="current"
      @change="change"
    >
      <swiper-item v-for="(item, index) in StarDreambCurInfor" :key="index">
        <view class="doc-detail">
          <view class="doc-form">
            <view class="doc-form-row">
              <text class="label">验配时间</text>
              <text class="value">{{ item.FittingDate }}</text>
              <view class="value edit" @click="showEdit(item)">编辑</view>
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label"></text>
              <text class="label" style="width: 200rpx">左眼(OS)</text>
              <text class="label" style="width: 200rpx">右眼(OD)</text>
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label">绑定镜片</text>
              <image
                class="icon"
                src="../../static/ic_copy.png"
                mode="widthFix"
                @click="showBarCode('左眼验配条码', item.Lbarcode)"
              ></image>
              <text class="label">绑定镜片</text>
              <image
                class="icon"
                src="../../static/ic_copy.png"
                mode="widthFix"
                @click="showBarCode('右眼验配条码', item.Rbarcode)"
              ></image>
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label">镜片名称</text>
              <text class="value">{{ item.LlensName }}</text>
              <text class="value">{{ item.RLensName }}</text>
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label">镜片膜层</text>
              <text class="value">{{ item.LlensLayer }}</text>
              <text class="value">{{ item.RlensLayer }}</text>
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label">球镜</text>
              <text class="value">{{ item.Lsph }}D</text>
              <text class="value">{{ item.Rsph }}D</text>
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label">柱镜</text>
              <text class="value">{{ item.Lcyl }}D</text>
              <text class="value">{{ item.Rcyl }}D</text>
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label">验配单</text>
              <image
                class="icon"
                src="../../static/ic_upload.png"
                mode="widthFix"
              ></image>
              <text
                class="label"
                style="width: 200rpx; color: #3fbdfc"
                @click="showImage(item.FittingList)"
                >查看验配单</text
              >
            </view>
            <view class="divider"></view>
            <view class="doc-form-row">
              <text class="label">购买凭证</text>
              <image
                class="icon"
                src="../../static/ic_scan.png"
                mode="widthFix"
              ></image>
              <text
                class="label"
                style="width: 200rpx; color: #3fbdfc"
                @click="showImage(item.BuyVoucher)"
                >查看购买凭证</text
              >
            </view>
            <!-- <view class="divider"></view> -->
            <!-- <view class="bottom-btns">
              <view class="delete" @click="showDelete(item)"> 删除 </view>
              <view class="edit" @click="showEdit(item)"> 编辑 </view>
            </view> -->
            <view class="doc-form-row center">
              <view class="end-divider"></view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <view
      class="prev-item"
      v-if="StarDreambCurInfor.length && current > 0"
      @click="current -= 1"
    >
      <image
        class="ic-prev"
        src="../../static/ic_prev.png"
        mode="widthFix"
      ></image>
    </view>
    <view
      class="next-item"
      v-if="
        StarDreambCurInfor.length && current < StarDreambCurInfor.length - 1
      "
      @click="current += 1"
    >
      <image
        class="ic-next"
        src="../../static/ic_next.png"
        mode="widthFix"
      ></image>
    </view>

    <uni-popup ref="popupAddDoc" type="center" :isMaskClick="false">
      <addDoc
        @onCancel="onCancelAddDoc"
        @onConfirm="onConfirmAddDoc"
      ></addDoc>
    </uni-popup>
  </view>
</template>

<script>
import { mapState } from "vuex";
import addDoc from "@/widgets/add_doc.vue";
export default {
  components: {addDoc},
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    change(e) {
      this.current = e.detail.current;
    },
    showImage(url) {
      uni.previewImage({
        urls: [url],
      });
    },
    close() {
      this.$emit("close");
    },
    showEdit(item) {
      this.$store.commit('setDocEditItem', {...item})
      this.addDoc();
    },
    addDoc() {
      this.$refs.popupAddDoc.open();
    },
    onCancelAddDoc() {
      console.log("onCancelAddDoc")
      this.$refs.popupAddDoc.close();
    },
    onConfirmAddDoc(form) {
      console.log("onConfirmAddDoc", form)
      this.$refs.popupAddDoc.close();
      // postEditVisionArchivesInfor
      this.$store.dispatch("postEditVisionArchivesInfor", form);
      this.close();
    },
    showBarCode(title, value) {
      uni.showModal({
        title: title,
        content: value,
      });
    },
  },
  computed: mapState(["StarDreambCurInfor"]),
};
</script>

<style>
.doc-detail-container {
  margin-top: 15rpx;
  position: relative;
  align-self: center;
}
.doc-detail {
  background-color: white;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  width: calc(100vw - 70rpx);
  /* overflow: hidden; */
  position: relative;
}
.title {
  height: 90rpx;
  background-color: #3fbdfc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45rpx;
  /* border-radius: 30rpx; */
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  position: relative;
}
.title .ic-close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 30rpx;
  top: 20rpx;
  padding: 8rpx;
  box-sizing: border-box;
}
.doc-form {
  display: flex;
  flex-direction: column;
  padding: 0 25rpx;
}
.doc-form-row {
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 15rpx;
}
.doc-form-row .label {
  width: 140rpx;
  display: inline-block;
}
.doc-form-row .value {
  color: #999999;
  width: 230rpx;
}
.doc-form-row .icon {
  width: 35rpx;
  padding: 10rpx;
  margin-right: 35rpx;
}
.doc-form-row .edit {
  color: #3fbdfc;
  text-align: right;
  padding-right: 10rpx;
}
.divider {
  background-color: #e5f2f9;
  height: 1rpx;
}
.end-divider {
  width: 40rpx;
  height: 4rpx;
  background-color: #9fdaff;
  border-radius: 2rpx;
}
.doc-form-row.center {
  align-items: center;
  justify-content: center;
  padding-top: 20rpx;
}
.prev-item {
  width: 100rpx;
  /* background-color: red; */
  position: absolute;
  height: 100rpx;
  left: -30rpx;
  top: 0;
  bottom: 0;
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-item {
  width: 100rpx;
  /* background-color: red; */
  position: absolute;
  height: 100rpx;
  right: -30rpx;
  top: 0;
  bottom: 0;
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic-prev,
.ic-next {
  width: 30rpx;
}
.bottom-btns {
  height: 70rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom-btns .edit {
  color: black;
  padding: 10rpx 15rpx;
}
.bottom-btns .delete {
  color: red;
  padding: 10rpx 15rpx;
}
</style>